<template>
    <div>
        <el-card shadow="never" class="border-1">
            <template #header>
                <div class="flex justify-between">
                    <span class="text-sm">文章发布热点图</span>
                </div>
            </template>
            <!-- card body -->
            <div id="publishArticleChart" style="width: 100%; height: 300px;">

            </div>
        </el-card>

    </div>
</template>

<script setup>
import { ref, reactive, onMounted, onBeforeMount } from 'vue';
import * as echarts from 'echarts';
import { getDashboardPublishArticleStatisticsInfo } from '@/api/admin/dashboard'

/*
* origin：将整个年度的活跃图都显示出来，这就导致因屏幕尺寸不足难以显示后面月数的热图信息
* repair：只显示已当前日期为基准，前四后二总共六个月的热图信息
* */
const currentDate = new Date();
const currentYear = currentDate.getFullYear();
const currentMonth = currentDate.getMonth() + 1;
const startYear = currentYear;
const startMonth = currentMonth - 4; // 获取最近三个月的数据
const endYear = currentYear;
const endMonth = currentMonth + 2;

// 生成模拟数据
const myData = [
    [currentYear + '-03-01', 5],
    [currentYear + '-03-05', 3],
    [currentYear + '-03-10', 8],
    [currentYear + '-03-15', 4],
    [currentYear + '-03-20', 6],
    [currentYear + '-03-25', 2],
    [currentYear + '-04-01', 7],
    [currentYear + '-04-05', 4],
    [currentYear + '-04-10', 3],
    [currentYear + '-04-15', 5]
];

var myChart = null

onMounted(() => {
    var chartDom = document.getElementById('publishArticleChart');
    myChart = echarts.init(chartDom);

    var option = {
        tooltip: {
            position: 'top',
            formatter: function (params) {
                return params.value[0] + ': ' + params.value[1] + ' 篇';
            }
        },
        visualMap: {
            min: 0,
            max: 10,
            calculable: true,
            orient: 'horizontal',
            left: 'center',
            bottom: '15%',
            inRange: {
                color: ['#fff', '#40c463', '#30a14e', '#216e39']
            }
        },
        calendar: {
            top: 60,
            left: 30,
            right: 30,
            cellSize: ['auto', 20],
            range: currentYear,
            itemStyle: {
                borderWidth: 0.5
            },
            yearLabel: { show: false }
        },
        series: {
            type: 'heatmap',
            coordinateSystem: 'calendar',
            data: myData,
            label: {
                show: true
            },
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    };

    option && myChart.setOption(option);
});
</script>
